<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			let arr=[]
			function say(){
				let username=document.getElementById("username")
				let message=document.getElementById("message")
				//let str="["+username.value+"]说："+message.value+"!" //在字符串中间插入变量
				if(username==""||message==""){
					document.getElementById("messsage").innerHTML("请输入文字信息")
					
					return
				}
				let str = `[${username.value}]说:${message.value}!`;
				arr.unshift(str)
				if(arr.length>10){
					arr.pop()
				}
				document.getElementById("messsages").value=arr.join("\n")
			}
			function reset(){
				// 清空输入框和消息列表
				document.getElementById("username").value = "";
				document.getElementById("message").value = "";
				document.getElementById("messsages").value = "";
				//arr = [];
			}
		</script>
	</head>
	<body>
		姓名：<input type="text" id="username"/>
		<br>
		留言：
		<textarea rows="3" cols="30" id="message" style="vertical-align: middle;resize: none;"></textarea>
		<br>
		<button type="button" onclick="reset()">重置</button>
		<button type="button" onclick="say()">留言</button>
		<hr >
		<textarea rows="10" cols="50" id="messsages" style="resize: none;" disabled="disabled"></textarea>
	</body>
</html>
